<template>
	<view style="background-color: #ebebeb;">
		<carHeader :title="'确认订单'"></carHeader>
		<view class="root">
			<view class="dingdan">
				<!-- 上 -->
				<view class="top">
					<view class="yuan01">
						<u-row
								justify="space-between"
								gutter="3"
						>
							<u-col span="3">
								<view class="demo-layout1">
									<image src="/static/车联网服务-01专业洗车-03洗车-确认订单_slices/矩形 4@3x.png" mode=""></image>
									<view>预约</view><view>服务</view>
								</view>
							</u-col>
							<u-col span="3">
								<view class="demo-layout"></view>
							</u-col>
							<u-col span="3">
								<view class="demo-layout1">
									<image src="/static/车联网服务-01专业洗车-03洗车-确认订单_slices/矩形 4 拷贝@3x.png" mode=""></image>
									<view>支付</view><view>订单</view>
								</view>
							</u-col>
							<u-col span="3">
								<view class="demo-layout"></view>
							</u-col>
							<u-col span="3">
								<view class="demo-layout1">
									<image src="/static/车联网服务-01专业洗车-03洗车-确认订单_slices/矩形 4 拷贝 2@3x.png" mode=""></image>
									<view>门店</view><view>服务</view>
								</view>
							</u-col>
						</u-row>	
					</view>
				</view>
				<!-- 中 -->
				<view class="middle">
					<view style="width: 600rpx;border-top: 10rpx solid #f7f7f7;padding-top: 40rpx;" class="m01">
						<view class="image01" style="width: 40rpx;">
							<image src="/static/车联网服务-01专业洗车-03洗车-确认订单_slices/商家@2x.png" mode=""></image>
						</view>
						<view class="text01">
							<view class="">
								<text>伟业汽车美容店(人民路店)</text>
							</view>
							<view class="" style="margin-top: 6rpx;">
								<text style="font-size: 28rpx;color: #b2b2b2;">山阳区人民中路33号</text>
							</view>
						</view>
					</view>
					<view class="m02">
						<view class="image02" style="width: 40rpx;">
							<image style="width: 30rpx;height: 35rpx;margin-left: 4rpx;" src="/static/车联网服务-01专业洗车-03洗车-确认订单_slices/人员@2x.png" mode=""></image>
						</view>
						<view class="text02">
							<view class="">
								<text>张先生</text>
								<text style="position: relative;right: -270rpx;color: #b2b2b2;font-size: 28rpx;">18656894566</text>
							</view>
						</view>
					</view>
					<view class="m03">
						<view class="image03" style="width: 40rpx;">
							<image src="/static/车联网服务-01专业洗车-03洗车-确认订单_slices/车辆-01@2x.png" mode=""></image>
						</view>
						<view class="text03">
							<text>奔驰FWE4/豫A56487</text>
							<image src="/static/车联网服务-01专业洗车-03洗车-确认订单_slices/收起箭头小@2x.png" style="width: 20rpx;height: 34rpx;position: absolute;right: 80rpx;" mode=""></image>
						</view>
					</view>
				</view>
				<!-- 下 -->
				<view class="bottom">
					<view class="text01">
						<view class="">
							<text>服务产品</text>
						</view>
						<view class="">
							<text>共选择</text>
							<text style="color: #428dfb;">1项</text>
							<text>服务产品</text>
						</view>
					</view>
					<view class="text02">
						<text>精洗汽车</text>
						<text style="color:#ff3000">¥&nbsp;39.9</text>
					</view>
				</view>
				<!-- 优惠卷部分 -->
				<view class="youhui">
					<view class="text01">
						<image src="/static/车联网服务-01专业洗车-03洗车-确认订单_slices/优惠券@2x.png" mode=""></image>
						<text>代金券/优惠卷</text>
					</view>
					<view class="text02">
						<text style="color: #ff501d;">-10元</text>
						<image src="/static/车联网服务-01专业洗车-03洗车-确认订单_slices/收起箭头小 拷贝@2x.png" mode=""></image>
					</view>
				</view>
				
			</view>
			
			<!-- 下方客服 -->
			<view class="contact">
				<view class="c1" @click="openSheet">
					<image src="/static/车联网服务-01专业洗车1slices/客服@3x.png" mode="aspectFit"></image>
					<text>联系客服</text>
				</view>
				<view class="c2" @click="open">
					<image src="/static/车联网服务-01专业洗车1slices/矩形 10@2x.png" mode="aspectFit"></image>
					<text>提交下单</text>
				</view>
				<u-action-sheet
					:show="show2"
					@close="show2 = false"
					:actions="actions2"
					cancelText="取消拨号"
				>
				</u-action-sheet>
			</view>
			
			<!-- 支付的弹出层 -->
			<u-popup :show="show" :round="10" mode="center" closeable= true @close="close" @open="open">
				<view style="padding: 30rpx;">
					<view class="popup01">
						<text>请输入支付密码</text>
					</view>
					<view class="popup02">
						<text>车辆服务平台</text>
					</view>
					<view class="popup03">
						<text style="padding-right: 10rpx;">¥</text><text>39.90</text>
					</view>
					<view class="popup04">
						<view class="popup04t">
							<text>支付方式</text><text style="float: right;">零钱></text>
						</view>
						<u-code-input v-model="value3" :maxlength="6" ></u-code-input>
					</view>
					
				</view>
			</u-popup>
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mendian:{
					name: '伟业汽车美容店(人民路店)',
					dizhi: '山阳区人民中路33号'
				}, //门店存储信息
				user:{
					name:'张先生',
					phone:'18656894566',
					car:'奔驰FWE4/豫A56487'}, //用户存储信息
				show2: false, //客服弹框层
				actions2: [{
						name: '18642589456',
					},
					{
						name: '复制',
					}
				], //客服弹框数据
				show: false, //支付弹框层
				value3: '' //支付
			}
		},
		methods: {
			//客服弹出层
			openSheet(){
				this.show2 = true;
			},
			//支付弹出层
			open(){
				this.show = true;
			},
			close() {
			  this.show = false
			  // console.log('close');
			}
		}
	}
</script>

<style lang="scss">
.root{
	position: absolute;
	top: 11%;
}
.dingdan{
	margin-left: 4%;
	width: 82%;
	padding: 5%;
	// position: relative;
	border-radius: 30rpx;
	background-color: white;
	// top: 11%;
}

.top{
	width: 228.3px;
	padding: 0 24rpx;
	.yuan01{
		image{
			width: 110rpx;
			height: 110rpx;
		}
		.demo-layout{
			height: 50rpx;
			width: 100rpx;
			padding-top: 27rpx;
			border-top: 3rpx dashed #dadada;
		}
		.demo-layout1{
			// height: 140rpx;
			view{
				color: white;
				font-size: 28rpx;
				position: relative;
				bottom: 100rpx;
				left: 26rpx;
			}
		}
	}
}

.middle{
	width: 750rpx;
	image{
		width: 38rpx;
		height: 35rpx;
	}
	.m01,.m02,.m03{
		display: flex;
	}
	.text01,.text02,.text03{
		padding-left: 15rpx;
	}
	.m02{
		padding: 10rpx 0 20rpx 0;
	}
	.m03{
		padding-top: 10rpx;
		padding-bottom: 15rpx;
	}
}

.bottom{
	margin-top: 20rpx;
	padding-top: 40rpx;
	border-top: 1rpx solid #dadada;
	.text01{
		display: flex;
		justify-content: space-between;
	}
	.text02{
		padding: 35rpx 0;
	}
}

.youhui{
	margin-top: 10rpx;
	padding: 50rpx 0 20rpx 0;
	border-top: 1rpx solid #dadada;
	display: flex;
	justify-content: space-between;
	.text01{
		text{
			position: relative;
			top: -5rpx;
			margin-left: 10rpx;
		}
		image{
			width: 45rpx;
			height: 34rpx;
		}
	}
	.text02{
		text{
			margin-right: 30rpx;
			position: relative;
			top: -5rpx;
		}
		image{
			width: 20rpx;
			height: 34rpx;
		}
	}
}

.contact{
	margin-top: 150rpx;
	height: 150rpx;
	background-color: white;
	.c1{
		margin-left: 20rpx;
		height: 150rpx;
		// line-height: 150rpx;	
		image{
			padding-top: 50rpx;
			height: 50rpx;
			width: 60rpx;
		}
		text{
			position: absolute;
			bottom: 53rpx;
			margin-left: 15rpx;
			// line-height: 150rpx;	
		}
	}
	.c2{
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
		float: right;
		image{
			position: absolute;
			right: 15rpx;
			bottom: 15rpx;
			height: 80rpx;
			width: 200rpx;
		}
		text{
			color: white;
			position: relative;
			right: 48rpx;
			bottom: 35rpx;
		}
	}
}

.popup01{
	text-align: center;
	text{
		font-size: 27rpx;
		font-weight: bold;
	}
}
.popup02{
	text-align: center;
	padding: 40rpx 0 10rpx 0;
	text{
		font-size: 27rpx;
	}
}
.popup03{
	text-align: center;
	padding: 5rpx 0 30rpx 0;
	text{
		font-size: 50rpx;
	}
}
.popup04{
	padding: 20rpx;
	border-top: 1rpx solid #eeeeee;
	font-size: 25rpx;
	color: #a8a8a8;
	.popup04t{
		padding-bottom: 20rpx;
	}
}
</style>
